জাভাস্ক্রিপ্ট ব্রাউজার বোম (Browser Object Model বা BOM) হলো একটি গুরুত্বপূর্ণ ধারণা যা ওয়েব ব্রাউজারের সাথে জাভাস্ক্রিপ্টের ইন্টারঅ্যাকশনকে পরিচালনা করে। BOM এর মাধ্যমে ডেভেলপাররা ব্রাউজারের উইন্ডো, নেভিগেশন, স্ক্রিন, ইতিহাস ইত্যাদি বিভিন্ন ব্রাউজার ফিচারকে নিয়ন্ত্রণ এবং ব্যবহার করতে পারেন। এটি ওয়েব পেজের বাহ্যিক অংশগুলির সাথে কাজ করার সুযোগ প্রদান করে, যা DOM (Document Object Model) দ্বারা নথির ভিতরের অংশের সাথে কাজ করা হয়।

ব্রাউজার অবজেক্ট মডেল (BOM) এর উপাদান

উইন্ডো অবজেক্ট (Window Object)

উইন্ডো অবজেক্ট BOM এর মূল অবজেক্ট এবং এটি ব্রাউজারের উইন্ডো বা ট্যাবকে প্রতিনিধিত্ব করে। সমস্ত অন্যান্য BOM অবজেক্ট উইন্ডো অবজেক্টের মাধ্যমে অ্যাক্সেস করা যায়।

উদাহরণ:

// উইন্ডোর উচ্চতা এবং প্রস্থ জানতে
console.log(window.innerHeight);
console.log(window.innerWidth);

// উইন্ডো বন্ধ করতে
window.close();
Copy

নেভিগেটর অবজেক্ট (Navigator Object)

নেভিগেটর অবজেক্ট ব্রাউজারের সম্পর্কে তথ্য সরবরাহ করে, যেমন ব্রাউজার নাম, সংস্করণ, প্ল্যাটফর্ম ইত্যাদি।

উদাহরণ:

console.log(navigator.appName);        // ব্রাউজারের নাম
console.log(navigator.userAgent);      // ইউজার এজেন্ট স্ট্রিং
console.log(navigator.language);       // ব্রাউজারের ভাষা
Copy

স্ক্রিন অবজেক্ট (Screen Object)

স্ক্রিন অবজেক্ট ব্যবহারকারীর স্ক্রিন সম্পর্কিত তথ্য সরবরাহ করে, যেমন স্ক্রিনের রেজোলিউশন, কালার ডেপথ ইত্যাদি।

উদাহরণ:

console.log(screen.width);    // স্ক্রিনের প্রস্থ
console.log(screen.height);   // স্ক্রিনের উচ্চতা
console.log(screen.colorDepth); // স্ক্রিনের কালার ডেপথ
Copy

হিস্টরি অবজেক্ট (History Object)

হিস্টরি অবজেক্ট ব্যবহার করে ব্রাউজারের ইতিহাসের সাথে ইন্টারঅ্যাকশন করা যায়, যেমন পেজে ফিরে যাওয়া বা সামনের দিকে যাওয়া।

উদাহরণ:

// এক পেজ পিছনে যাওয়া
history.back();

// দুই পেজ সামনে যাওয়া
history.go(2);

// বর্তমান পেজের ইতিহাসের দৈর্ঘ্য
console.log(history.length);
Copy

লোকেশন অবজেক্ট (Location Object)

লোকেশন অবজেক্ট বর্তমান URL এর তথ্য সরবরাহ করে এবং URL পরিবর্তন করতে ব্যবহার করা হয়।

উদাহরণ:

// বর্তমান URL দেখতে
console.log(window.location.href);

// নতুন URL লোড করতে
window.location.href = "https://www.example.com";

// বর্তমান পেজ রিলোড করতে
window.location.reload();
Copy

ডায়ালগ বক্স (Dialog Boxes)

ডায়ালগ বক্স ব্যবহারকারীর সাথে সরাসরি যোগাযোগ করতে ব্যবহৃত হয়, যেমন সতর্কতা, নিশ্চিতকরণ, অথবা ইনপুট নেওয়া।

উদাহরণ:

// সতর্কতা বক্স
alert("এই একটি সতর্কতা বার্তা।");

// নিশ্চিতকরণ বক্স
let confirmResult = confirm("আপনি কি সত্যিই এই অপারেশনটি করতে চান?");
console.log(confirmResult);  // true বা false

// ইনপুট বক্স
let userInput = prompt("আপনার নাম লিখুন:", "জন");
console.log(userInput);
Copy

টাইমিং ইভেন্টস (Timing Events)

টাইমিং ইভেন্টস ব্যবহার করে নির্দিষ্ট সময় পরে বা নির্দিষ্ট সময় অন্তর কোড এক্সিকিউট করা যায়।

উদাহরণ:

// ৩ সেকেন্ড পরে বার্তা প্রদর্শন
setTimeout(function() {
    console.log("৩ সেকেন্ড পরে এই বার্তা দেখাবে।");
}, 3000);

// প্রতি ১ সেকেন্ডে বার্তা প্রদর্শন
let intervalId = setInterval(function() {
    console.log("এই বার্তা প্রতি ১ সেকেন্ডে দেখাবে।");
}, 1000);

// ৫ সেকেন্ড পরে ইন্টারভ্যাল বন্ধ করা
setTimeout(function() {
    clearInterval(intervalId);
    console.log("ইন্টারভ্যাল বন্ধ করা হয়েছে।");
}, 5000);
Copy

ব্রাউজার উইন্ডো ম্যানিপুলেশন

ব্রাউজার উইন্ডো খোলা, বন্ধ করা, বা ম্যানিপুলেট করা যায় উইন্ডো অবজেক্টের মেথড ব্যবহার করে।

উদাহরণ:

// নতুন উইন্ডো খোলা
let newWindow = window.open("https://www.example.com", "ExampleWindow", "width=800,height=600");

// নতুন উইন্ডোতে ফোকাস আনা
newWindow.focus();

// নতুন উইন্ডো বন্ধ করা
newWindow.close();
Copy

BOM বনাম DOM

ব্রাউজার অবজেক্ট মডেল (BOM) এবং ডকুমেন্ট অবজেক্ট মডেল (DOM) দুটি ভিন্ন ধারণা, তবে তারা একে অপরের সাথে সম্পর্কিত।

• BOM: ব্রাউজারের উইন্ডো, নেভিগেশন, স্ক্রিন ইত্যাদি নিয়ন্ত্রণ করে।
• DOM: ওয়েব পেজের HTML এবং CSS এলিমেন্টগুলি নিয়ন্ত্রণ করে।

উদাহরণ:

// BOM এর উদাহরণ: উইন্ডোর প্রস্থ
console.log(window.innerWidth);

// DOM এর উদাহরণ: একটি HTML এলিমেন্ট নির্বাচন করা
let header = document.getElementById("header");
console.log(header.innerHTML);
Copy

BOM এর ব্যবহার

ব্রাউজার অবজেক্ট মডেল (BOM) ব্যবহার করে ডেভেলপাররা ওয়েব পেজের বাহ্যিক ফিচারগুলির সাথে ইন্টারঅ্যাক্ট করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

উদাহরণ:

// ব্রাউজার উইন্ডো সাইজ পরিবর্তন করা
window.resizeTo(1024, 768);

// ব্রাউজার উইন্ডো স্ক্রল করা
window.scrollTo(0, 500);

// ব্রাউজার ইতিহাসে নতুন পেজ যোগ করা
history.pushState({page: 1}, "title 1", "?page=1");
Copy

সারাংশ

জাভাস্ক্রিপ্ট ব্রাউজার বোম (BOM) হল ব্রাউজারের বিভিন্ন অংশের সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত একটি অবজেক্ট মডেল। উইন্ডো, নেভিগেটর, স্ক্রিন, হিস্টরি, লোকেশন ইত্যাদি অবজেক্টের মাধ্যমে ডেভেলপাররা ব্রাউজারের বাহ্যিক ফিচারগুলিকে নিয়ন্ত্রণ এবং ব্যবহার করতে পারেন। BOM এবং DOM একে অপরের সাথে সম্পর্কিত হলেও, তারা বিভিন্ন কাজের জন্য ব্যবহৃত হয়। BOM ব্যবহার করে ওয়েব পেজের বাহ্যিক অংশগুলির সাথে কাজ করা যায়, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।

ব্রাউজার অবজেক্ট মডেল সম্পর্কে গভীর ধারণা থাকলে, জাভাস্ক্রিপ্টের ক্ষমতা বাড়ে এবং ওয়েব অ্যাপ্লিকেশনগুলিকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করা সম্ভব হয়।